<template>
	<view class="page flex-col">
		<view class="p-top">
			<view class="p-top-key">
				批量修改
			</view>
			<view class="p-top-con align-center">
				<view class="p-top-con-item" @click="showHoliday">
					节假日
				</view>
				<view class="p-top-con-item" @click="showWeekend">
					周末
				</view>
				<view class="p-top-con-item" @click="showDateRange">
					指定日期范围
				</view>
			</view>
		</view>
		<view class="p-cen">
			<view class="p-cen-key">
				价格日历
			</view>
		</view>
		<view class="p-date">
			<p-date @tapDate="showDate" :dateList="dateList" />
		</view>
		<!-- 
        <view class="p-time">
			<p-time :curTimestamp="curTimestamp" @bindChangeRight="onRightTime" @bindChangeLeft="onLeftTime" />
		</view>
		 -->
		<!-- 
		<view class="p-btn align-center justify-center">
			<submit-btn @submit="submit" ref="submitRef">
				<template v-slot:btns="{isSubmitted}">
					<view class="b-r" :class="{'disabled':isSubmitted}">
						确认
					</view>
				</template>
			</submit-btn>
		</view>
		-->
		<safe-area bgColor="#fff" />
	    
		<popup ref="holidayPop">
			<view class="pop-panel">
				<view class="close justify-center align-center" @click="closeHoliday">
					<image src="/static/close.png" mode="aspectFill" class="ic"></image>
				</view>
				<scroll-view scroll-y="true" class="pop-scroll">
					<view class="pop-title">
						节假日价格设置
					</view>
					<view class="pop-inpt" v-for="(item,i) in holiday">
						<view class="key">
							<span class="key-l">{{item.title}}</span>
							<span class="key-r">{{showPopDate(item.date_json)}}</span>
						</view>
						<view class="inpt-wrap align-center">
							<input type="number" class="inpt" placeholder="请设置价格" v-model="item.val">
							<span class="unit">元/天</span>
						</view>
					</view>
					<view class="pop-btn" @click="confirmHoliday">
						立即设置
					</view>	
				</scroll-view>
			</view>
		</popup>
		<popup ref="weekendPop">
			<view class="pop-panel">
				<view class="close justify-center align-center" @click="closeWeekend">
					<image src="/static/close.png" mode="aspectFill" class="ic"></image>
				</view>
				<scroll-view scroll-y="true" class="pop-scroll">
					<view class="pop-title">
						周末价格设置
					</view>
					<view class="pop-inpt" >
						<view class="key">
							<span class="k-l">周末价格</span>
						</view>
						<view class="inpt-wrap align-center">
							<input type="number" class="inpt" placeholder="请设置价格" v-model="weekendVal">
							<span class="unit">元/天</span>
						</view>
					</view>
					<view class="pop-btn" @click="confirmWeekend">
						立即设置
					</view>
			    </scroll-view>
		    </view>	
		</popup>
		<popup ref="dateRangePop">
			<view class="pop-panel">
				<view class="close justify-center align-center" @click="closeDateRange">
					<image src="/static/close.png" mode="aspectFill" class="ic"></image>
				</view>
				<scroll-view scroll-y="true" class="pop-scroll" @mousemove="stopPrevent">
					<view class="pop-title">
						指定日期价格设置
					</view>
					<view class="pop-inpt" >
						<view class="key">
							<span class="k-l">指定时间</span>
						</view>
						<view class="select-wrap align-center">
							<picker mode="date"  @change="onStartDate" :start="startdate" :end="enddate" style="flex:1">
								<view  class="inpt" :class="{'placeholder' : !chosenStartDate}"  v-text="chosenStartDate ? chosenStartDate : '起始日期'" />
							</picker>
							<span class="unit">~</span>
							<picker mode="date"  @change="onEndDate" :start="startdate" :end="enddate" style="flex:1">
								<view  class="inpt" :class="{'placeholder' : !chosenEndDate}" v-text="chosenEndDate ? chosenEndDate : '结束日期'" />
							</picker>
						</view>
					</view>
					<view class="pop-inpt" >
						<view class="key">
							<span class="k-l">设置价格</span>
						</view>
						<view class="inpt-wrap align-center">
							<input type="number" class="inpt" placeholder="请设置价格" v-model="dateRangeVal">
							<span class="unit">元/天</span>
						</view>
					</view>
					<view class="pop-btn" @click="confirmDateRange">
						立即设置
					</view>
				</scroll-view>
			</view>	
		</popup>
	    <popup ref="datePop">
	    	<view class="pop-panel">
	    		<view class="close justify-center align-center" @click="closeDate">
	    			<image src="/static/close.png" mode="aspectFill" class="ic"></image>
	    		</view>
	    		<scroll-view scroll-y="true" class="pop-scroll">
	    			<view class="pop-title">
	    				价格设置
	    			</view>
	    			<view class="pop-inpt" >
	    				<view class="key">
	    					<span class="k-l">{{chosenDate.date}}价格</span>
	    				</view>
	    				<view class="inpt-wrap align-center">
	    					<input type="number" class="inpt" placeholder="请设置价格" v-model="dateVal">
	    					<span class="unit">元/天</span>
	    				</view>
	    			</view>
	    			<view class="pop-btn" @click="confirmDate">
	    				立即设置
	    			</view>
	    	    </scroll-view>
	        </view>	
	    </popup>
	</view>
</template>

<script lang="ts">
import {
	defineComponent,
	// watchEffect,
	reactive,
	toRefs,
	// watch,
	ref,
	computed
} from 'vue';
import pDate from './components/p-date.vue';
import { onLoad} from '@dcloudio/uni-app';
const selectTime = defineComponent({
	components:{
		pDate,
	},
	setup(props: any, ctx: any) {
		const data:any = reactive({
		
			//{name:1,val:timestamp,元旦，休，hasTips:false, tips:'',今天、冬至，type:1/2/3/4  1取/还车，2取车 3中间日，4还车}, hasRest,rest:'',暂未用
			// dateList: [], // { monthTxt, list }
			
			// startTimestamp: '', //秒
			// endTimestamp: '',
			// curTimestamp: Date.parse(new Date()),
			// leftTime:{}, //选中时间项 {name:`${h}:00`,h:i,m:0}
			// rightTime:{}, //选中时间项 {name:`${h}:00`,h:i,m:0}
			
			id:'',   //汽车id
			dateList: [], // { monthTxt, list }
			holiday:[],
			startdate:'',
			enddate:'',
			
			weekendVal:'', //批量设置周末价格
			chosenEndDate:'', //批量设置选择日期范围
			chosenStartDate:'',
			chosenStartDateStamp: '', //时间戳 /1000 用于循环判断日期范围
			chosenEndDateStamp: '', //时间戳 /1000
			dateRangeVal:'',//批量日期范围值
			
			chosenDate:{}, //选择要更改的日期
			dateVal:'', //更改日期值
			
		});
		const holidayPop = ref();
		const weekendPop = ref();
		const  dateRangePop = ref();
		const  datePop = ref();
		onLoad((e)=>{
			data.id = e.id;
			getPrice();
		})
		const  showHoliday=()=>{
			holidayPop.value.show();
		}
		const closeHoliday=()=>{
			holidayPop.value.hide();
		}
		const  showWeekend=()=>{
			weekendPop.value.show();
		}
		const closeWeekend=()=>{
			weekendPop.value.hide();
		}
		const  showDateRange=()=>{
			dateRangePop.value.show();
		}
		const closeDateRange=()=>{
			dateRangePop.value.hide();
		}
		
		const  showDate=(item)=>{
			data.dateVal = item.price;
			data.chosenDate = item;
			datePop.value.show();
		}
		const closeDate=()=>{
			data.dateVal = '';
			data.chosenDate = {};
			datePop.value.hide();
		}
		//获价格
		const getPrice = async()=>{
			const sendData = {
				id: data.id
			}
			const res = await uni.$request('car.get_car_price',sendData);
			data.dateList =  res.data.rili || [];
			data.holiday = res.data.holiday || [];
			data.startdate = res.data.startdate;
			data.enddate = res.data.enddate;
		}
		//处理弹层节日时间
		const showPopDate=(date_json)=>{
			let temp = ''
			if(date_json.length>1){
				temp = `(${date_json[0]}~${date_json[date_json.length-1]})`
			}else{
				temp = `(${date_json[0]})`
			}
			return temp;
		}
		//处理选择日期
		const handleIosDate = (str)=>{
		   return str.replace(/-/g, '/')
		}
		const onStartDate = (e)=>{
             data.chosenStartDate =	e.detail.value;
			 data.chosenStartDateStamp = new Date(handleIosDate(e.detail.value)).getTime() / 1000;
		}
		const onEndDate = (e)=>{
		     let endDate = new Date(handleIosDate(e.detail.value)).getTime() / 1000;
			 let startDate =  data.chosenStartDateStamp;
			 if(endDate <= startDate){
				 uni.$tools.msg('结束日期应晚于起始日期')
				 return;
			 }
			 data.chosenEndDate = e.detail.value;
			 data.chosenEndDateStamp = endDate;
		}
        
		 
		 
		//确认节假日
		const confirmHoliday = async ()=>{
			if(! data.holiday ||  data.holiday.length=== 0){
				return;
			}
			const valHolidayObj = {};
			const price_data_temp = {}
			data.holiday.forEach((h)=>{
				if(h.val && !isNaN(h.val) && parseInt(h.val)>0){
					valHolidayObj[h.id]=h;
					h.date_json.forEach(j=>{
						price_data_temp[j]=h.val
					})
				}
			})
			if(Object.keys(valHolidayObj).length === 0){
				uni.$tools.msg('请设置价格')
				return;
			}
			const price_data = {}
			data.dateList.forEach(l=>{
				const tempArr = l.list || [];
				for( var i = 0; i<tempArr.length; i++ ){
					let d = tempArr[i];
					if(price_data_temp[d.date]){
						price_data[d.date] = price_data_temp[d.date]
					}else if(d && d.date){
						//日期有空情况
						price_data[d.date] = d.price || 0;
					}
				}
			})
			const sendData = {
				id: data.id,
				price_data: JSON.stringify(price_data),
			}
			// console.log("price_data===",price_data)
			// return;
			const res = await uni.$request('car.set_car_price',sendData);
			closeHoliday();
			data.dateList.forEach(l=>{
				l.list.forEach(d=>{
					if(valHolidayObj[d.jq_id]){
						d.price = valHolidayObj[d.jq_id].val
					}
				})
			})
		}
		//确认周末
		const confirmWeekend = async ()=>{
			if(! data.weekendVal){
				uni.$tools.msg('请设置价格')
				return;
			}
			const price_data_temp = {}
			data.dateList.forEach(l=>{
				l.list.forEach(d=>{
					if(d.week === '0' || d.week==='6'){
						// d.price = data.weekendVal
						price_data_temp[d.date]=data.weekendVal
					}
				})
			})
			
			const price_data = {}
			data.dateList.forEach(l=>{
				const tempArr = l.list || [];
				for( var i = 0; i<tempArr.length; i++ ){
					let d = tempArr[i];
					if(price_data_temp[d.date]){
						price_data[d.date] = price_data_temp[d.date]
					}else if(d && d.date){
						//日期有空情况
						price_data[d.date] = d.price || 0;
					}
				}
			})
			
			
			
			const sendData = {
				id: data.id,
				price_data: JSON.stringify(price_data),
			}
			const res = await uni.$request('car.set_car_price',sendData);
			closeWeekend();
			data.dateList.forEach(l=>{
				l.list.forEach(d=>{
					if(d.week === '0' || d.week==='6'){
						d.price = data.weekendVal
					}
				})
			})
		}
		//确认日期范围选择
		const confirmDateRange = async ()=>{
			if(! data.dateRangeVal){
				uni.$tools.msg('请设置价格')
				return;
			}
			if(!data.chosenStartDate || !data.chosenEndDate){
				uni.$tools.msg('请选择日期')
				return;
			}
			const price_data_temp = {}
			data.dateList.forEach(l=>{
				l.list.forEach(d=>{
					if( d.val && parseInt(d.val) >= data.chosenStartDateStamp &&  parseInt(d.val) <= data.chosenEndDateStamp ){
						price_data_temp[d.date]=data.dateRangeVal
					}
				})
			})
			
			const price_data = {}
			data.dateList.forEach(l=>{
				const tempArr = l.list || [];
				for( var i = 0; i<tempArr.length; i++ ){
					let d = tempArr[i];
					if(price_data_temp[d.date]){
						price_data[d.date] = price_data_temp[d.date]
					}else if(d && d.date){
						//日期有空情况
						price_data[d.date] = d.price || 0;
					}
				}
			})
			
			const sendData = {
				id: data.id,
				price_data: JSON.stringify(price_data),
			}
			const res = await uni.$request('car.set_car_price',sendData);
			closeDateRange();
			data.dateList.forEach(l=>{
				l.list.forEach(d=>{
					if( d.val && parseInt(d.val) >= data.chosenStartDateStamp &&  parseInt(d.val) <= data.chosenEndDateStamp ){
						d.price = data.dateRangeVal
					}
				})
			})
		}
		//确认日期选择
		const confirmDate = async ()=>{
			if(! data.dateVal){
				uni.$tools.msg('请设置价格')
				return;
			}
			const price_data_temp = {}
			data.dateList.forEach(l=>{
				l.list.forEach(d=>{
					if( d.val && d.val === data.chosenDate.val ){
					
						price_data_temp[d.date]=data.dateVal
					}
				})
			})
			
			const price_data = {}
			data.dateList.forEach(l=>{
				const tempArr = l.list || [];
				for( var i = 0; i<tempArr.length; i++ ){
					let d = tempArr[i];
					if(price_data_temp[d.date]){
						price_data[d.date] = price_data_temp[d.date]
					}else if(d && d.date){
						//日期有空情况
						price_data[d.date] = d.price || 0;
					}
				}
			})

			
			const sendData = {
				id: data.id,
				price_data: JSON.stringify(price_data),
			}
			const res = await uni.$request('car.set_car_price',sendData);
			datePop.value.hide();
			data.dateList.forEach(l=>{
				l.list.forEach(d=>{
					if( d.val && d.val === data.chosenDate.val ){
						d.price = data.dateVal
					}
				})
			})
			closeDate();
		}
		return {
			...toRefs(data),
			holidayPop,
			showPopDate,
			closeHoliday,
			showHoliday,
			weekendPop,
			closeWeekend,
			showWeekend,
			dateRangePop,
			closeDateRange,
			showDateRange,
			confirmHoliday,
			confirmWeekend,
			onStartDate,
			onEndDate,
			confirmDateRange,
			datePop,
			showDate,
			closeDate,
			confirmDate,
		};
	}
})
export default selectTime;
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
	.page{
		height: 100vh;
	}
	.p-top{
		padding: 0 30rpx 30rpx;
		background-color: #fff;
		flex-shrink: 0;
		flex-grow: 0;
		&-key{
			height: 88rpx;
			line-height: 88rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		&-con{
			&-item{
				height: 60rpx;
				background: #409EFF;
				border-radius: 4rpx;
				padding: 0 24rpx;
				line-height: 60rpx;
				margin-right: 30rpx;
				
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
		
	}
	.p-cen{
		flex-shrink: 0;
		flex-grow: 0;
		padding: 0 30rpx;
		background-color: #fff;
		&-key{
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}
	.p-date{
		flex:1;
		// overflow: hidden;
		height: 0;
	}
	.p-btn{
		flex-shrink: 0;
		flex-grow: 0;
		height: 100rpx;
		background-color: #fff;
		.b-r{
			width: 690rpx;
			height: 85rpx;
			background: #3E6FEF;
			border-radius: 43rpx;
			line-height: 85rpx;
			text-align: center;
			
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			&.disabled{
				background-color: #eee;
			}
		}
	}
    .pop-panel{
		background: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
		padding: 10rpx 30rpx 40rpx 40rpx;
		overflow: hidden;
		width: 690rpx;
		.pop-scroll{
			position: relative;
			// min-height: 744rpx;
			max-height: 70vh;
		}
		.close{
			position: absolute;
			top: 0;
			right: 0;
			width: 84rpx;
			height: 84rpx;
			z-index: 10;
			.ic{
				width: 24rpx;
				height: 24rpx;
			}
		}
		.pop-title{
			height: 90rpx;
			line-height: 90rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			text-align: center;
			margin-bottom: 6rpx;
		}
		.pop-inpt{
			.key{
				height: 75rpx;
				&-l{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 75rpx;
				}
				&-r{
					color:#999999;
					font-size: 22rpx;
				}
			}
			.inpt-wrap{
				margin-bottom: 16rpx;
				.inpt{
					width: 530rpx;
					height: 68rpx;
					background: #FFFFFF;
					border: 2rpx solid #E8E8E8;
					border-radius: 4rpx;
					line-height: 68rpx;
					padding: 0 20rpx;
					color:#333;
					font-size: 24rpx;
				}
				.unit{
					margin-left: 16rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
			.select-wrap{
				margin-bottom: 16rpx;
				.inpt{
					flex:1;
					height: 68rpx;
					background: #FFFFFF;
					border: 2rpx solid #E8E8E8;
					border-radius: 4rpx;
					line-height: 68rpx;
					padding: 0 20rpx;
					color:#333;
					font-size: 24rpx;
				}
				.unit{
					text-align: center;
					width: 54rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999;
				}
			}
		}
		.pop-btn{
			margin-top: 59rpx;
			width: 630rpx;
			height: 85rpx;
			background: #3E6FEF;
			border-radius: 43rpx;
			line-height: 85rpx;
			text-align: center;
			
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>
